import React,{Component} from 'react';
import Head from './common/Head';
import {Button, Row, Col, Table, Upload, Icon, message, Spin} from 'antd';
import axios from 'axios';

class In extends Component{

    constructor(props){
        super(props);

        this.state = {
            urlpath:this.props.match.path,
            filePath:"",
            serialNumber:"",
            disabled:"",
            loadingflag:false,
            columns : [{
                title: '流水号',
                dataIndex: 'serialNumber',
                key: 'serialNumber'
            },{
                title: '型号',
                dataIndex: 'proModel',
                key: 'proModel'
            },{
                title: '全称',
                dataIndex: 'proName',
                key: 'proName'
            },{
                title: '条形码',
                dataIndex: 'barCode',
                key: 'barCode'
            },{
                title: '数量',
                dataIndex: 'proNum',
                key: 'proNum'
            },{
                title: '套件',
                dataIndex: 'proSuit',
                key: 'proSuit'
            },{
                title: '操作',
                dataIndex: 'operate',
                key: 'operate',
                render:(text, record) => (
                    <span>
                       <a onClick={()=>this.printBarCord(record)}>打印</a>
                    </span>
                )
            }],
            data : [],
            p : {
                name: 'file',
                action: `${global.constants.apiPath}/upload/uploadFilePge.htm`,
                onChange:(info) => {
                  if (info.file.status !== 'uploading') {
                    //console.log(info.file, info.fileList);
                  }
                  if (info.file.status === 'done') {
                    message.success(`${info.file.name} 上传成功`);
                    this.setState({filePath : info.file.response.content.fileURL});
                  } else if (info.file.status === 'error') {
                    message.error(`${info.file.name} 上传失败`);
                  }
                },
            },
        }
    }

    printBarCord =(record)=> {
        let newWindow = window.open();
        newWindow.document.write('<div style="border-bottom:solid"><span style="font-size:1px">'+record.proName+'</span></div><div style="border-bottom:solid;font-size:1px">'+record.proModel+'</div><img src="'+record.barCodeImg+'" style="margin-top:1px;width:80%">');
        setTimeout(() => {
            newWindow.print();
            newWindow.close();
        }, 100);
    }

    importData=()=> {
        this.setState({
            loadingflag:true
        })
        axios.get(`${global.constants.apiPath}/in/importInFile.htm`,{
            params:{
                filePath : this.state.filePath
            }
        }).then((response)=> {
            if(response.data.code === "0"){
                message.success(response.data.desc);
                this.setState({
                    data: response.data.content,
                    serialNumber:response.data.content[0].serialNumber,
                    disabled:"",
                    loadingflag:false
                });
            } else {
                message.error(response.data.desc);
            }

        
        })
        .catch(function (error) {
            this.setState({
                loadingflag:false
            });
            console.log(error);
        });
    }

    sureData=()=>{
        if(!this.state.serialNumber){
            message.error("请先导入【入库单】");
            return;
        }
        axios.get(`${global.constants.apiPath}/in/sureData.htm`,{
            params:{
                serialNumber : this.state.serialNumber
            }
        }).then((response)=> {
            if(response.data.code === "0"){
                message.success(response.data.desc);
                this.setState({
                    disabled:"disabled"
                })
            } else {
                message.error(response.data.desc);
            }

        
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render(){
        return(
            <div>
                <Head urlpath={this.state.urlpath}></Head>
                <Spin tip="加载中..." spinning={this.state.loadingflag}>
                    <div>
                        <Row style={{margin:'20px'}}>
                            <Col span={16}></Col>
                            <Col span={4}>
                                <Upload {...this.state.p}>
                                    <Button>
                                    <Icon type="upload" />请上传入库单
                                    </Button>
                                </Upload>
                            </Col>
                            <Col span={4}>
                                <Button type="primary" onClick={this.importData}>导入</Button>
                            </Col>
                        </Row>
                        <Table rowKey={record => record.proId} columns={this.state.columns} dataSource={this.state.data} />
                        <Row>
                            <Col span={20}></Col>
                            <Col span={4}>
                                <Button type="primary" onClick={this.sureData} disabled={this.state.disabled} >确认入库</Button>
                            </Col>
                        </Row>
                    </div>
                </Spin>
            </div>
        );
    }
}
export default In;